<template>
  <div>
    <van-nav-bar
      title="待发货/预售"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <van-tabs v-model:active="activeTab">
      <van-tab title="待发货">
        <!-- 待发货内容 -->
        <div class="content">
          <div v-for="item in items" :key="item.id" class="item">
            <van-checkbox v-model="item.checked" class="checkbox" />
            <img :src="item.image" class="item-image" />
            <div class="item-details">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-quantity">数量：{{ item.quantity }}</div>
              <div class="item-price">价格：¥{{ item.price }}</div>
            </div>
          </div>
          
          <div class="select-all-container">
            <van-checkbox v-model="selectAll" @change="handleSelectAllChange">全选</van-checkbox>
            <span class="shipping-info">预计12元，满三个包裹</span>
          </div>
        </div>

        <!-- 添加按钮 -->
        <div class="button-container">
          <button class="bottom-button" @click="handleButtonClick">立即发货</button>
        </div>

        <van-dialog
          v-model:show="showDialog"
          title="发货规则"
          show-cancel-button
          @cancel="showDialog = false"
        >
          1、盲盒购买后，需要您手动申请发货，默认支付相应邮费，满3个包邮（不包括赠品）可享受包邮服务。<br/>
          2、提交发货后，一般会在10-15个工作日内为您基础，如遇到部分款式缺货，可能会为您优先发出有货款式，缺货的款式会在供应商到货后立即基础。<br/>
          3、盲盒发出后，可在待收货查看详细的物流单号。<br/>
          4、如您在申请发货后的10-15个工作日内未能正常发出，可选择【继续等待】或退款，退款方式为：个人中心-联系客服，进行登记处理<br/>
        </van-dialog>
      </van-tab>
      
      <van-tab title="预售款">
        <!-- 预售款内容 -->
        <div class="content">
          <div v-for="item in preSaleItems" :key="item.id" class="item">
            <van-checkbox v-model="item.checked" class="checkbox" />
            <img :src="item.image" class="item-image" />
            <div class="item-details">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-quantity">数量：{{ item.quantity }}</div>
              <div class="item-price">价格：¥{{ item.price }}</div>
              <div class="item-expected-date">预计发货日期：{{ item.expectedDate }}</div>
            </div>
          </div>
          
          <div class="select-all-container">
            <van-checkbox v-model="selectAllPreSale" @change="handleSelectAllPreSaleChange">全选</van-checkbox>
            <span class="shipping-info">预计12元，满三个包裹</span>
          </div>
        </div>

        <!-- 添加按钮 -->
        <div class="button-container">
          <button class="bottom-button" @click="handlePreSaleButtonClick">立即发货</button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'; 
import { useRouter } from 'vue-router';  // Correctly import useRouter
import { useOrderStore } from '../../store/order'
import { Dialog, Button, NavBar, Tabs, Tab, Checkbox } from 'vant'; 

const showDialog = ref(false);
const activeTab = ref(0); // 修正为数字 (注意这里与 v-model 绑定的一致性)
const selectAll = ref(false);
const selectAllPreSale = ref(false);
const items = ref([
  { id: 1, image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500', name: '火影忍者典藏款', quantity: 1, price: 100, checked: false },
  { id: 2, image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500', name: '火影忍者高级款', quantity: 2, price: 200, checked: false },
  // 你可以添加更多商品信息
]);
const preSaleItems = ref([
  { id: 1, image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500', name: '火影忍者典藏款', quantity: 1, price: 150, checked: false, expectedDate: '2023-12-01' },
  { id: 2, image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500', name: '火影忍者高级款', quantity: 2, price: 250, checked: false, expectedDate: '2023-12-15' },
  // 你可以添加更多预售商品信息
]);

const router = useRouter();  // Correctly assign useRouter()

const onClickLeft = () => {
  history.back();
};

const handleButtonClick = () => {
  const store = useOrderStore();
  const selectedItems = items.value.filter(item => item.checked);
  store.setDispatchedItems(selectedItems); 
  router.push({ path: "/shippingsuccess" });  // Correctly use router to navigate
};

const handlePreSaleButtonClick = () => {
  // 预售按钮点击逻辑
  console.log('预售按钮点击');
};

const handleSelectAllChange = () => {
  items.value.forEach(item => {
    item.checked = selectAll.value;
  });
};

const handleSelectAllPreSaleChange = () => {
  preSaleItems.value.forEach(item => {
    item.checked = selectAllPreSale.value;
  });
};

onMounted(() => {
  showDialog.value = true; // 组件挂载完成后自动弹出对话框
});
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #f5f5f5;
}
.select-all-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.checkbox {
  margin-right: 10px;
}
.item-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 4px;
  object-fit: cover;
}
.item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item-name, .item-quantity, .item-price, .item-expected-date {
  margin-bottom: 5px;
}
.van-button {
  margin-top: 20px;
}
.button-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.bottom-button {
  color: white;
  background-color: black;  /* Adjust color to match JD.com or Pinduoduo */
  border: none;
  padding: 10px 0;
  width: 100%;
  font-size: 18px;
}
.shipping-info {
  color: #333;
  font-size: 14px;
  margin-left: 10px;
}
</style>
